// import { HashRouter as Router, Route, Link } from 'react-router-dom';
import {
  BrowserRouter as Router,
  Route,
  Link,
  NavLink,
  Switch,
} from 'react-router-dom';

import Todo from './Todo';

import './App.css';

const First = () => <div>页面1的组件</div>;
const Firsttt = () => <div>Firsttt</div>;
const Forever = () => <div>Forever</div>;
const Home = () => (
  <ul>
    <li>
      <NavLink to={'/first'} activeClassName={'first-active'}>
        页面1
      </NavLink>
    </li>
    <li>
      <Link to={'/todo'}>Todo</Link>
    </li>
  </ul>
);

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path={'/'} component={Home} />
        {/* 要渲染的组件 */}
        <Route path={'/first'} component={First} />
        <Route path={'/todo'} component={Todo} />
        <Route render={() => <div>404</div>} />
        {/* <Route path={'/first'} component={First} /> */}
        {/* <Route component={Forever} />
         <Route render={() => <div>Forever2</div>} /> */}
      </Switch>
    </Router>
  );
};

export default App;
